<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>六爻排盘</title>
    <link rel="icon" href="{{ url_for('static', filename='images/girls.ico') }}" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <div class="area1">
            <a href="#dialog"><img src="{{ url_for('static', filename='images/dialog_icon_30_30.png') }}" alt="Dialog"></a>
            <a href="#database"><img src="{{ url_for('static', filename='images/database_icon_30_30.png') }}" alt="Database"></a>
            <a href="#profile"><img src="{{ url_for('static', filename='images/profile_icon_30_30.png') }}" alt="Profile"></a>
        </div>
        <div class="area2">
            <input type="text" id="search" placeholder="Search...">
            <select id="yongshen" name="yongshen">
                <option value="父母">父母</option>
                <option value="兄弟">兄弟</option>
                <option value="子孙">子孙</option>
                <option value="妻财">妻财</option>
                <option value="官鬼">官鬼</option>
                <option value="世">世</option>
                <option value="应">应</option>
            </select>
            <select id="theme" name="theme">
                <option value="文书-快递">文书-快递</option>
                <option value="文书-招标">文书-招标</option>
                <option value="婚姻-占夫-男朋友">婚姻-占夫-男朋友</option>
                <option value="婚姻-占妻-女朋友">婚姻-占妻-女朋友</option>
                <option value="">官鬼</option>
                <option value="">世</option>
                <option value="">应</option>
            </select>
            <!-- Add more select boxes and listviews here -->
        </div>
        <div class="area3"><!-- h1 放在 #f6f6f6 为背景颜色的方框中 -->
            <h1>六爻排盘</h1>

            <input type="text" id="title" name="title" placeholder="请输入占题"><br>
            <input type="text" id="coinNum" name="coinNum" placeholder="请输入阳面硬币数组 (初二三四五六)"><br>
            <input type="text" id="time" name="time" placeholder="请输入起卦时间 (中文简体字符,无关字符默认当前时间)"><br>
            <button onclick="submitForm()">排盘</button>
            <!-- <button onclick="printValues()">获取元素值</button> -->
        </div>

    </div>
    <script src="{{ url_for('static', filename='scripts.js') }}"></script>
    <script>
        function submitForm() {
        var title = document.getElementById("title").value;
        var coinNum = document.getElementById("coinNum").value;
        var time = document.getElementById("time").value;
            // 获取第一个 select 的值
        var yongshen = document.getElementById("yongshen").value;
        var theme = document.getElementById("theme").value;

        // 打印到控制台
        console.log("yongshen: ", yongshen);
        console.log("theme: ", theme);


        fetch('/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `title=${title}&coinNum=${coinNum}&time=${time}&yongshen=${yongshen}&theme=${theme}`
        }).then(response => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json(); // 更改为读取JSON响应
        }).then(data => {
                // 使用data.text作为查询参数
            window.location.href = '/place_result?text=' + encodeURIComponent(data.text); // 跳转到结果页
        }).catch(error => {
            console.error('Error:', error);
        });
    }
    function printValues() {
            // 获取所有的input元素
            const inputs = document.querySelectorAll('input');
            // 获取所有的select元素
            const selects = document.querySelectorAll('select');

            let values = '';

            // 遍历input元素
            inputs.forEach((input, index) => {
                if (input.type !== 'button') { // 跳过按钮类型的input
                    values += `Input ${index + 1}:${input.value}\n`;
                }
            });

            // 遍历select元素
            selects.forEach((select, index) => {
                values += `Select ${index + 1}:${select.value}\n`;
            });

            // 打印到控制台
            console.log(values);
        }
    </script>
    <footer>
        <a href="about.html">关于我们</a>|
        <a href="advertising.html">广告投放</a>|
        <a href="submission-guide.html">投稿指南</a>|
        <a href="site-navigation.html">网站导航</a>|
        <a href="favorites.html">收藏任叶三沐风的网站</a>|
        <a href="set-homepage.html">设为首页</a><br>

        copyright © 2023-2024 <a href="http://www.bilibili.cn/">任叶三沐风</a> 版权所有

    </footer>
</body>
</html>
